<template>
  <div class="banner">
    <ul class="box">
      <router-link to="/" class="logo-link">
        <img class="logo" src="../assets/logo.png" alt="">
      </router-link>
      <router-link to="/" class="items" :class="{active:navHome}" tag="li">
        首页
      </router-link>
      <li class="items" :class="{active:navParam}" @mouseenter="show" @mouseleave="hide" exact>
        方案 <i></i>
        <div class="program" v-show="programShow">
          <ul>
            <p class="title">{{programTitle}}</p>
            <router-link tag="li" v-for="(item,index) in program" :to="item.path" :key="index">
              <img v-lazy="item.src" alt="">
              <p class="name">{{item.name}}</p>
            </router-link>
          </ul>
          <i></i>
          <ul class="vr">
            <p class="title">{{virtualTitle}}</p>
            <router-link tag="li" to="/VirtualCloud" v-for="(item,index) in vurtual" :key="index">
              <img v-lazy="item.src" alt="">
              <p class="name">{{item.name}}</p>
            </router-link>
          </ul>
        </div>
      </li>
      <li class="items" :class="{active:navProduct}" @mouseenter="show1" @mouseleave="hide1" exact>
        产品 <i></i>
        <div class="product" v-show="productShow">
          <ul>
            <p class="title">{{productTitle}}</p>
            <router-link tag="li" :to="item.path " v-for="(item,index) in product" :key="index">
              <img v-lazy="item.src" alt="">
              <p class="name">{{item.name}}</p>
            </router-link>
          </ul>
          <i></i>
          <ul class="vr">
            <p class="title">{{oneMachineTitle}}</p>
            <router-link tag="li" to="/oneMachine" v-for="(item,index) in oneMachine" :key="index">
              <img v-lazy="item.src" alt="" style="margin-top: 25px;margin-left:15px">
              <p class="name">{{item.name}}</p>
            </router-link>
          </ul>
        </div>
      </li>
      <router-link to="/customer" class="items" :class="{active:navCase}" tag="li">
        案例
      </router-link>
      <li class="items">
        <a href="http://www.51byyb.cn/DSManage">
          Aten云平台
        </a>
      </li>
      <router-link to="/newsLists" class="items" :class="{active:navNews}" tag="li">
        公司新闻
      </router-link>
      <router-link to="/about" class="items" :class="{active:about}" tag="li" @click.native="refresh">
        关于我们
      </router-link>
      <router-link to="/contact" class="items" :class="{active:contact}" tag="li">
        联系我们
      </router-link>
      <!--<router-link to="/" class="items" :class="{active:navSupport}" tag="li">
        技术支持
      </router-link>-->
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        navHome: false,
        navParam: false,
        navProduct: false,
        navCase: false,
        navNews: false,
        navSupport: false,
        programShow: false,
        productShow: false,
        about: false,
        contact: false,
        programTitle: "数字标牌",
        program: [
          {
            src: require('../assets/cinema.png'),
            name: "影院",
            path: '/cinema'
          },
          {
            src: require('../assets/eatting.png'),
            name: "餐饮",
            path: '/catering'
          },
          {
            src: require('../assets/shopping.png'),
            name: "商超",
            path: '/super'
          }
        ],
        virtualTitle: "虚拟云桌面",
        vurtual: [
          {
            src: require('../assets/virtualDesktop.png'),
            name: "云桌面"
          }
        ],
        oneMachineTitle:"数字标牌APP",
        oneMachine:[
          {
            src: require('../assets/virtualDesktop1.png'),
            name:"电视上安装即用"
          }
        ],
        productTitle: "网络播放盒",
        product: [
          {
            src: require('../assets/versionA.png'),
            name: "基础版",
            path: '/basic'
          },
          {
            src: require('../assets/versionB.png'),
            name: "联动版",
            path: "/linkage"
          },
          {
            src: require('../assets/versionB.png'),
            name: "特效版",
            path: "/special"
          }
        ]
      }
    },
    methods: {
      show(){
        this.programShow = true
      },
      hide(){
        this.programShow = false
      },
      show1(){
        this.productShow = true
      },
      hide1(){
        this.productShow = false
      },
      refresh(){
        window.location.reload();
        console.log(0)
      }
    },
    watch: {
      $route(to, from){
        $("body").css("overflow","auto");
        $("#footer").css({"position":"relative"});
        let route = to.path;
        if (to.name === "NewsDetial") {
          this.navHome = false;
          this.navParam = false;
          this.navProduct = false;
          this.navCase = false;
          this.navNews = true;
          this.navSupport = false;
          this.about = false;
          this.contact = false;
        } else {
          switch (route) {
            case "/":
              this.navHome = true;
              this.navParam = false;
              this.navProduct = false;
              this.navCase = false;
              this.navNews = false;
              this.navSupport = false;
              this.about = false;
              this.contact = false;
              break;
            case "/cinema":
            case "/catering":
            case "/super":
            case "/VirtualCloud":
              this.navHome = false;
              this.navParam = true;
              this.navProduct = false;
              this.navCase = false;
              this.navNews = false;
              this.navSupport = false;
              this.about = false;
              this.contact = false;
              break;
            case "/basic":
            case "/linkage":
            case "/special":
            case "/oneMachine":
              this.navHome = false;
              this.navParam = false;
              this.navProduct = true;
              this.navCase = false;
              this.navNews = false;
              this.navSupport = false;
              this.about = false;
              this.contact = false;
              break;
            case "/customer":
              this.navHome = false;
              this.navParam = false;
              this.navProduct = false;
              this.navCase = true;
              this.navNews = false;
              this.navSupport = false;
              this.about = false;
              this.contact = false;
              break;
            case "/newsLists":
              this.navHome = false;
              this.navParam = false;
              this.navProduct = false;
              this.navCase = false;
              this.navNews = true;
              this.navSupport = false;
              this.about = false;
              this.contact = false;
              break;
            case "/contact":
              this.navHome = false;
              this.navParam = false;
              this.navProduct = false;
              this.navCase = false;
              this.navNews = false;
              this.navSupport = false;
              this.about = false;
              this.contact = true;
              break;
            case "/about":
              $("body").css("cssText","overflow:hidden");
              $("#footer").css({"position":"fixed","bottom":"0"});
              this.navHome = false;
              this.navParam = false;
              this.navProduct = false;
              this.navCase = false;
              this.navNews = false;
              this.navSupport = false;
              this.about = true;
              this.contact = false;
          }
        }
      }
    },
    mounted(){
      $("#footer").css({"position":"relative"});
      let route = this.$route.path;
      if (this.$route.name === "NewsDetial") {
        this.navHome = false;
        this.navParam = false;
        this.navProduct = false;
        this.navCase = false;
        this.navNews = true;
        this.navSupport = false;
        this.about = false;
        this.contact = false;
      } else {
        switch (route) {
          case "/":
            this.navHome = true;
            this.navParam = false;
            this.navProduct = false;
            this.navCase = false;
            this.navNews = false;
            this.navSupport = false;
            this.about = false;
            this.contact = false;
            break;
          case "/cinema":
          case "/catering":
          case "/super":
          case "/VirtualCloud":
            this.navHome = false;
            this.navParam = true;
            this.navProduct = false;
            this.navCase = false;
            this.navNews = false;
            this.navSupport = false;
            this.about = false;
            this.contact = false;
            break;
          case "/basic":
          case "/linkage":
          case "/special":
          case "/oneMachine":
            this.navHome = false;
            this.navParam = false;
            this.navProduct = true;
            this.navCase = false;
            this.navNews = false;
            this.navSupport = false;
            this.about = false;
            this.contact = false;
            break;
          case "/customer":
            this.navHome = false;
            this.navParam = false;
            this.navProduct = false;
            this.navCase = true;
            this.navNews = false;
            this.navSupport = false;
            this.about = false;
            this.contact = false;
            break;
          case "/newsLists":
            this.navHome = false;
            this.navParam = false;
            this.navProduct = false;
            this.navCase = false;
            this.navNews = true;
            this.navSupport = false;
            this.about = false;
            this.contact = false;
            break;
          case "/contact":
            this.navHome = false;
            this.navParam = false;
            this.navProduct = false;
            this.navCase = false;
            this.navNews = false;
            this.navSupport = false;
            this.about = false;
            this.contact = true;
            break;
          case "/about":
            $("body").css("cssText","overflow:hidden");
            $("#footer").css({"position":"fixed","bottom":"0"});
            this.navHome = false;
            this.navParam = false;
            this.navProduct = false;
            this.navCase = false;
            this.navNews = false;
            this.navSupport = false;
            this.about = true;
            this.contact = false;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .banner {
    width: 85%;
    height: 60px;
    margin: 0 auto;
    font-size: 14px;
    color: #505050;
  }

  a {
    text-decoration: none;
    color: #505050;
  }

  a:hover {
    color: #f39800;
  }

  .box {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .logo-link {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .items {
    height: 100%;
    list-style: none;
    margin-left: 50px;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
  }

  .items:hover {
    color: #f39800;
  }

  .items > i {
    width: 12px;
    height: 12px;
    margin-left: 10px;
    background: url("../assets/arrow-down.png") no-repeat 0 3px;
  }

  .items:hover > i {
    background: url("../assets/arrow-right.png") no-repeat 3px 0;
    transform: rotate(90deg);
  }

  .active {
    color: #f39800;
  }

  .box {
    position: relative;
  }

  .program, .product {
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -213px;
    z-index: 10;
    border: 1px solid #e9e9e9;
    cursor: default;
    color: #505050;
  }

  .product {
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -240px;
    z-index: 10;
    border: 1px solid #e9e9e9;
    cursor: default;
  }

  .program li, .program ul {
    float: left;
    margin: 10px 30px;
    margin-bottom: 20px;
  }

  .product li, .product ul {
    float: left;
    margin: 10px 30px;
    margin-bottom: 20px;
  }

  .program li, .product li {
    cursor: pointer;
  }

  .program .title, .product .title {
    font-size: 20px;
    margin: 20px;
  }

  .name {
    text-align: center;
    margin-top: 10px;
  }

  .program ul {
    width: 20%;
  }

  .product ul {
    width: 40%;
  }

  .program i, .product i {
    height: 80%;
    display: block;
    border-left: 1px solid #c9c9c9;
    position: absolute;
    left: 23%;
    top: 10%;
  }

  .product i {
    left: 42% !important;
  }

  .vr {
    width: 30% !important;
  }

  @media screen and (max-width: 1600px) {
    .program ul {
      width: 30%;
    }

    .product ul {
      width: 55%;
    }

    .program i, .product i {
      left: 33%;
    }

    .product i {
      left: 58% !important;
    }
  }
</style>
